<template>
	<view class="supplier-container">
		<my-navbar title="数据统计"></my-navbar>
		<u-card title="总销售数据" margin="0px">
			<template #body>
				<view class="stat-cards">
					<u-card v-for="(item, index) in statItems" :key="index" :title="item.title" border-radius="10" margin="5rpx">
						<template #body>
							{{ item.value }}
						</template>
					</u-card>
				</view>
			</template>
		</u-card>

		<u-card title="近30天销售数据" margin="0px" style="margin-top: 20rpx">
			<template #body>
				<view style="width: 100%; height: 300px">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :canvas2d="true" canvasId="columnChart" />
				</view>
			</template>
		</u-card>

		<u-card title="商品销售榜" margin="0px" style="margin-top: 20rpx">
			<template #body>
				<view class="table" v-if="store.state.supplier.supplierTop100.length">
					<view class="header">
						<view class="header-item">排名</view>
						<view class="header-item">商品</view>
						<view class="header-item">销量</view>
					</view>
					<view class="row" v-for="(row, index) in store.state.supplier.supplierTop100" :key="index">
						<view class="cell">{{ index + 1 }}</view>
						<view class="cell">{{ row.product_name }}</view>
						<view class="cell">{{ row.total_quantity }}</view>
					</view>
				</view>
				<u-empty v-else></u-empty>
			</template>
		</u-card>

		<u-card title="订单来源分析" margin="0px" style="margin-top: 20rpx">
			<template #body>
				<view style="width: 100%; height: 300px">
					<qiun-data-charts type="pie" :opts="pieOpts" :chartData="pieChartData" :canvas2d="true" canvasId="pieChart" />
				</view>
			</template>
		</u-card>

		<my-tabbar current-page="/pages/supplier/statistics"></my-tabbar>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from "vue";
	import {
		onReady,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "vuex";

	const store = useStore();

	const opts = {
		enableScroll: true,
		color: [
			"#1890FF",
			"#91CB74",
			"#FAC858",
			"#EE6666",
			"#73C0DE",
			"#3CA272",
			"#FC8452",
			"#9A60B4",
			"#ea7ccc",
		],
		padding: [15, 15, 0, 5],
		legend: {},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 2,
			scrollAlign: "left",
			scrollBackgroundColor: "#f7f7f7",
			scrollColor: "#1890FF",
		},
		yAxis: {
			data: [{
				min: 0,
			}, ],
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			},
		},
	};

	const chartData = computed(() => {
		return {
			categories: Object.keys(store.state.supplier.supplier30DaysData),
			series: [{
					name: "订单金额",
					data: Object.keys(store.state.supplier.supplier30DaysData).map(
						(key) => {
							return store.state.supplier.supplier30DaysData[key].sale_amount;
						}
					),
				},
				{
					name: "订单量",
					data: Object.keys(store.state.supplier.supplier30DaysData).map(
						(key) => {
							return store.state.supplier.supplier30DaysData[key].sale_cnt;
						}
					),
				},
				{
					name: "退款金额",
					data: Object.keys(store.state.supplier.supplier30DaysData).map(
						(key) => {
							return store.state.supplier.supplier30DaysData[key]
								.sale_service_amount;
						}
					),
				},
				{
					name: "退款订单量",
					data: Object.keys(store.state.supplier.supplier30DaysData).map(
						(key) => {
							return store.state.supplier.supplier30DaysData[key]
								.sale_service_cnt;
						}
					),
				},
			],
		};
	});

	const statItems = computed(() => {
		const data = store.state.supplier.supplierTotalData;
		return [{
				title: "订单金额",
				value: data.sale_amount
			},
			{
				title: "订单量",
				value: data.sale_cnt
			},
			{
				title: "退款金额",
				value: data.sale_service_amount
			},
			{
				title: "退款订单量",
				value: data.sale_service_ant
			},
		];
	});

	const pieOpts = {
		color: [
			"#1890FF",
			"#91CB74",
			"#FAC858",
			"#EE6666",
			"#73C0DE",
			"#3CA272",
			"#FC8452",
			"#9A60B4",
			"#ea7ccc",
		],
		padding: [15, 15, 0, 5],
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 1,
				borderColor: "#FFFFFF",
			},
		},
	};

	const keyMap = {
		merchant_order_cnt: "商户采购",
		customer_order_cnt: "客户下单",
	};

	const pieChartData = computed(() => {
		const sourceData = store.state.supplier.supplierOrderSource;
		return {
			series: [{
				data: Object.keys(sourceData).map((key) => {
					return {
						name: keyMap[key],
						value: sourceData[key],
					};
				}),
			}, ],
		};
	});

	onReady(async () => {
		await store.dispatch("fetchSupplierTotalData");
		await store.dispatch("fetchSupplier30DaysData");
		await store.dispatch("fetchSupplierTop100");
		await store.dispatch("fetchSupplierOrderSource");
	});
</script>

<style lang="scss" scoped>
	.supplier-container {
		padding: 20rpx;
	}

	.stat-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.table {
		.header {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			background-color: #f7f7f7;
			padding: 10rpx;

			.header-item {
				font-weight: bold;
				text-align: center;
			}
		}

		.row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			padding: 10rpx;
			border-bottom: 1px solid #e0e0e0;

			.cell {
				text-align: center;
			}
		}
	}
</style>